<template>
	<view>
		<u-toast ref="uToast" />
		<topic-info :topicinfo="topicinfo"></topic-info>
		<view>
			<tab-swiper-head  swiperstly="width: 50%;" bottomstly="margin-left: 140upx;"  @change='tabChange' :tabIndex="tabIndex" :tabBars="tabBars" @tapTab="tap"></tab-swiper-head>
		</view>
		<!-- 内容 -->
		<view class="topoc-info-list">
			<block v-for="(items ,index) in topicinfolist">
				<template v-if="index==tabIndex">
					<block v-for="(list,topindex) in items.list">
						<common-list @guanzhu="guanzhu" @ding="ding"  :item="list" :index="topindex"></common-list>
					</block>
				</template>
			</block>
		</view>
	</view>
</template>

<script>
		import topicInfo from '../../components/topic/topic-info.vue'
		import tabSwiperHead from '../../components/index/tab-swiper-head.vue'
		import commonList from '../../components/common/common-list.vue'
	export default {
		components:{
			topicInfo,
			tabSwiperHead,
			commonList
		},
		data() {
			return {
				TabHeight:500,//高度
				tabIndex:0,
				tabBars: [{
				    name: '最火',
				    id: '最火'
				}, {
				    name: '最新',
				    id: '最新'
				}],
				topicinfo:{
					img:'../../static/demo/demo6.jpg',
					title:'#你真棒#',
					text:'你是最棒的大傻逼',
					newnum:21,
					todaynum:99,
					id:1
				},
				topicinfolist:[
					{
						message:'上拉加载更多',
						list:[
							{
								//图片样式
								username:'我是昵称',
								userurl:'../../static/demo/datapic/10.jpg',
								userage:20,
								usersex:'女',
								isguanzhu:true,
								title:'我是图片',
								imgsrc:'../../static/demo/datapic/12.jpg',
								video:false,
								share:false,
								isimg:true,
								address:'深圳 龙岗',
								sharenum:22,
								talk:21,
								ding:22,
								isding:false
							},
							{
								
									//视频样式
									username:'我是昵称',
									userage:20,
									userurl:'../../static/demo/datapic/10.jpg',
									usersex:'男',
									isguanzhu:false,
									title:'我是视频',
									imgsrc:'../../static/demo/datapic/12.jpg',
									video:{
										playnum:20,
										time:'2:11'
									},
									share:false,
									address:'深圳 龙岗',
									sharenum:22,
									talk:21,
									ding:22		
							},
							{
								///文字格式
								username:'我是昵称',
								userage:20,
								userurl:'../../static/demo/datapic/10.jpg',
								usersex:'男',
								isguanzhu:false,
								title:'我是标题文字啊',
								imgsrc:'',
								video:false,
								share:false,
								address:'深圳 龙岗',
								sharenum:22,
								talk:21,
								ding:22		
							},
							{
								username:'我是昵称',
								userage:20,
								userurl:'../../static/demo/datapic/10.jpg',
								usersex:'男',
								isguanzhu:false,
								title:'我是分享啊',
								imgsrc:'',
								video:false,
								share:{
									shareimg:'../../static/demo/datapic/10.jpg',
									sharetitle:'我是分享的内容啊'
								},
								address:'深圳 龙岗',
								sharenum:22,
								talk:21,
								ding:22		
							}
						]
					},
					{
						message:'上拉加载更多',
						list:[
							{
								//图片样式
								username:'我是昵称',
								userurl:'../../static/demo/datapic/10.jpg',
								userage:20,
								usersex:'女',
								isguanzhu:true,
								title:'我是图片',
								imgsrc:'../../static/demo/datapic/12.jpg',
								video:false,
								share:false,
								isimg:true,
								address:'深圳 龙岗',
								sharenum:22,
								talk:21,
								ding:22,
								isding:false
							},
							{
								//图片样式
								username:'我是昵称',
								userurl:'../../static/demo/datapic/10.jpg',
								userage:20,
								usersex:'女',
								isguanzhu:true,
								title:'我是图片',
								imgsrc:'../../static/demo/datapic/12.jpg',
								video:false,
								share:false,
								isimg:true,
								address:'深圳 龙岗',
								sharenum:22,
								talk:21,
								ding:22,
								isding:false
							},
							{//图片样式
								username:'我是昵称',
								userurl:'../../static/demo/datapic/10.jpg',
								userage:20,
								usersex:'女',
								isguanzhu:true,
								title:'我是图片',
								imgsrc:'../../static/demo/datapic/12.jpg',
								video:false,
								share:false,
								isimg:true,
								address:'深圳 龙岗',
								sharenum:22,
								talk:21,
								ding:22,
								isding:false
							}
						]
					}
				]
			}
		},
		methods: {
			//关注x
			guanzhu(index){
				
				//取消关注
				if(this.topicinfolist[this.tabIndex].list[index].isguanzhu){
					this.$refs.uToast.show({
						title: '取消关注成功',
						type: 'success',
						position:'top'
					})
				}else{
					this.$refs.uToast.show({
						title: '关注成功',
						type: 'success',
						position:'top'
					})
				}
				this.topicinfolist[this.tabIndex].list[index].isguanzhu=!this.topicinfolist[this.tabIndex].list[index].isguanzhu
			},
			//顶
			ding(index){
					
				if(this.topicinfolist[this.tabIndex].list[index].isding){
					this.topicinfolist[this.tabIndex].list[index].ding--;
				}else{
					this.topicinfolist[this.tabIndex].list[index].ding++;
				}
			this.topicinfolist[this.tabIndex].list[index].isding=!this.topicinfolist[this.tabIndex].list[index].isding
			},
			//切换tab
			tap(index){
			this.tabIndex=index	
		
			},
			//滑动tab
			tabChange(event){
					console.log(this.topicinfolist[this.tabIndex])
				this.tabIndex=event.detail.current
			}
		}
	}
</script>

<style>

</style>
